<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看普通管理员</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="loginUsers"
            style="width: 100%;height: 500px;"
            con>
        <el-table-column
                prop="index"
                width="50" align="center">
        </el-table-column>
        <el-table-column
                prop="loginName"
                label="用户名"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                label="是否删除" align="center">
            <template slot-scope="scope">
                <el-button type="text" style="color: red" @click="delUserById(scope.row.id,scope.row.loginName)">删除
                </el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="是否清除密码" align="center">
            <template slot-scope="scope">
                <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="purgePassword(scope.row.id)"
                        title="此操作会将密码重置为admin"
                >
                    <el-button type="text" style="color: red" slot="reference">清除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currPage"
                :page-sizes="[10, 15, 20, 100]"
                :page-size="pageSize"
                layout="sizes, total, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            currPage: 1,//当前页
            pageSize: 10,//每页显示条数
            total: 0,//总条数
            loginUsers: [],
            loginUsersDate: {
                id: '',
                password: 'admin'
            }
        },
        methods: {
            purgePassword(id) {
                let _this = this;
                this.loginUsersDate.id = id;
                addOrUpdateAjax("put", "/logintable/updatePassword", _this.loginUsersDate, function (data) {
                    if (data.code == 200) {
                        _this.$message({
                            type: 'success',
                            message: data.msg
                        });
                        _this.myLoginInit();
                    } else {
                        _this.$message.error(data.msg)
                    }
                })
            },
            delUserById(id, name) {
                let _this = this;
                this.$confirm('此操作将永久' + name + '这个账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAJAX("delete", "/logintable/deleteById/" + id, null, function (data) {
                        if (data.code == 200) {
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            _this.myLoginInit();
                        } else {
                            _this.$message.error(data.msg)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.myLoginInit();
            }
            ,
            handleCurrentChange(val) {
                this.currPage = val;
                this.myLoginInit();
            },
            myLoginInit() {
                let _this = this;
                if (localStorage.getItem("token") != null) {
                    $.ajax({
                        url: "http://localhost:8080/carSales/logintable/selectAll?currPage=" + _this.currPage + "&pageSize=" + _this.pageSize,
                        type: 'get',
                        async: true,
                        // contentType: 'application/json;charset=utf-8',
                        data: _this.employeetable,
                        beforeSend: function (request) {
                            request.setRequestHeader("Authentication", localStorage.getItem("token"));
                        },
                        dataType: 'json',
                        success: function (data) {
                            _this.currPage = data.pageNum;
                            _this.pageSize = data.pageSize;
                            _this.total = data.total;
                            _this.loginUsers = data.data
                        }
                    })
                }else {
                    alert("未登录！！！")
                    top.location.href = "../login/login.html";
                }
            }
        },
        mounted() {
            this.myLoginInit();
        }
    })
</script>
</body>
</html>